<template>
  <Modal v-model="showModal"
         :footer-hide="true"
         :closable="true"
         title="角色添加权限"
         width="600"
  >
    <Table
      :columns="permissionColumns"
      ref="treeTable"
      :data="permissionData"
      height="460"
      stripe
      border
      highlight-row
      row-key="id"
    >
    </Table>
    <div class="right tapper">
      <Button type="primary" class="rapper" @click="formSubmit">确定</Button>
      <Button type="info" class="rapper" @click="formCancel">取消</Button>
    </div>
  </Modal>
</template>

<script>
import {getPermissionData} from "@/api/data";
import {getStatus} from "@/libs/tools";

export default {
  name: "AddRolePermission",
  props:{

  },
  data(){
    return {
      myPermissionData:[],
      showModal:false,
      permissionData: [],
      getStatus: getStatus,
      permissionColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '权限名称',
          key: 'permissionName',
          tree: true,
          minWidth: '150px',
          width: 200,
        },
        {
          title: '权限代码',
          key: 'permissionCode',
          minWidth: '150px',
          width: 150,
        },
        {
          title: '状态',
          key: 'status',
          //type: 'template',
          //template: 'permissionStatus',
          width: 90,
          minWidth: '50px',
          tooltip: true,
          resizable: true,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          }
        }
      ]
    }
  },
  methods:{
    showModals(myPermission,role){
      this.showModal = true;
      this.myPermissionData = myPermission;
      console.log(this.myPermissionData)
      if (this.myPermissionData instanceof Array){
        this.permissionData = this.permissionData.filter(o=>{
          for (const myPermissionDatum of this.myPermissionData) {

            if (myPermissionDatum.id===o.id){
              console.log(111)
              return false;
            }
          }
          return true;
        })
      }
    },
    formSubmit(){

    },
    formCancel(){

    },
    getData(){
      getPermissionData().then(res => {
        let data = res.data;
        if (data && data.code === 200) {
          this.permissionData = data.object;

        } else {
          this.$Message.error(data.message);
        }
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
.right {
  text-align: right
}

.rapper {
  margin: 0 2px;
}
.tapper{
  margin: 2px 0;
}
</style>
